<template>
	<view>
		<view>
			<CommonNavbar :navbarList="navbarList" :curNavbar="curNavbar" @handleChooseNavbar="handleChooseNavbar"></CommonNavbar>
			
			<view class="swiper-wrap" :style="{height: scrollViewHeight}">
				<swiper class="swiper" :current="curSwiperIndex" @change="handleSwiper">
					<swiper-item class="swiper-item">
						<scroll-view 
							scroll-y="true" 
							class="content-wrap"
							enable-back-to-top
						>
							<view 
								class="input-wrap" 
								@click.stop.prevent="handleChooseAffixConsume(0, item.name)"
								v-for="(item, index) in list[0]"
								:key="index"
							>
								<view class="l-wrap">
									<view v-if="!item.type">购买保险<text class="terms">《{{item.name}}》</text></view>
									<view v-else>{{item.name}}</view>
								</view>
								<view class="price">￥{{item.price}}</view>
							</view>
							
							<!-- <view v-if="list[0].length > 1">
								<view class="more_rider" @click="handleSwithMoreServerTo" v-if="showMoreServerTo">
									查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
								</view>
								<view class="more_rider" @click="handleSwithMoreServerTo" v-else>
									收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
								</view>
							</view> -->
						</scroll-view>
					</swiper-item>
					
					<swiper-item class="swiper-item">
						<scroll-view 
							scroll-y="true" 
							class="content-wrap"
							enable-back-to-top
						>
							<view 
								class="input-wrap" 
								@click.stop.prevent="handleChooseAffixConsume(1, item.name)"
								v-for="(item, index) in list[1]"
								:key="index"
							>
								<view class="l-wrap">
									<view v-if="!item.type">购买保险<text class="terms">《{{item.name}}》</text></view>
									<view v-else>{{item.name}}</view>
								</view>
								<view class="price">￥{{item.price}}</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonNavbar from '../common/common-navbar.vue'
	export default {
		components: {
			CommonNavbar
		},
		props: {
			serviceList: {
				type: Array
			}
		},
		data() {
			return {
				navbarList: [
					{name: '去程服务',alias: 'from'},
					{name: '返程服务',alias: 'to'}
				],
				curSwiperIndex: 0,
				curNavbar: {name: '去程服务',alias: 'from'},
				list: this.serviceList,
				showMoreServerTo: false, // 展示更多去程服务
				showMoreServerfrom: false, // 展示更多返程服务
			};
		},
		watch: {
			serviceList(v) {
				this.list = v
			}
		},
		computed: {
			scrollViewHeight() {
				if (!this.list.length) return '0rpx'
				return this.list[this.curSwiperIndex].length * 100 + 'rpx'
			}
		},
		methods: {
			handleSwithMoreServerTo() {
				this.showMoreServerTo = !this.showMoreServerTo
			},
			handleSwithMoreServerFrom() {
				this.showMoreServerFrom = !this.showMoreServerFrom
			},
			handleChooseNavbar(item, i) {
				this.curNavbar = item
				this.curSwiperIndex = i // 通知调用handleSwiper方法
			},
			handleSwiper(e) {
				let i = e.detail.current
				this.curNavbar = this.navbarList[i]
				this.curSwiperIndex = i
				this.$emit('handleChooseNavbar', this.curNavbar, i)
			},
			handleChooseAffixConsume(i, name) {
				this.list[i].forEach(item => {
					if (item.name == name) {
						item.choosed = !item.choosed
						this.$forceUpdate()
						this.$emit('handleChooseService', this.list[i], i)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.swiper-wrap {
	.swiper {
		.swiper-item {
			.content-wrap {
				height: 100%;
				box-sizing: border-box;
				background-color: #fff;
				padding: 0 30rpx;
				.input-wrap {
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #ebebeb;
					font-size: 30rpx;
					&:last-child {
						border: none;
					}
					.l-wrap {
						display: flex;
						align-items: center;
						.icon {
							display: inline-block;
							height: 30rpx;
							width: 30rpx;
							margin-right: 20rpx;
						}
						.terms {
							color: $blue;
						}
					}
					.ul_service {
						display: flex;
						.li_service {
							display: flex;
							align-items: center;
							font-size: 30rpx;
							margin-left: 80rpx;
							.txt {
								margin-left: 20rpx;
							}
						}
					}
					.type {
						font-size: 30rpx;
					}
					.input {
						flex: 1;
						text-align: right;
						font-size: 30rpx;
						display: flex;
						input {
							padding-right: 6rpx;
						}
					}
				}
				.content {
					padding: 20rpx 30rpx;
				}
			}
		}
	}
}
.more_rider {
	height: 83rpx;
	line-height: 83rpx;
	text-align: center;
	color: #999;
}
</style>
